<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我又不早睡的主页——留言</title>
<link href="css/base.css" rel="stylesheet">
<link href="css/gbook.css" rel="stylesheet">	
<script type="text/javascript">
        var Storage =
        {
            saveData:function()//保存数据
            {
                var data = document.querySelector("#post textarea");
                if(data.value != "")
                {
				    var data0=document.getElementById("name");
                    var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法，作用是返回 1970年01月01日至今的毫秒数
                    localStorage.setItem(time, data.value + "|" + this.getDateTime()+"|"+data0.value);//将毫秒数存入Key值中，可以降低Key值重复率
                    data.value = "";
                    this.writeData();
					data0.value="";
					document.getElementById("name")=data0;
                }
                else
                {
                    alert("请填写您的留言！");
                }
            },
            writeData:function()//输出数据
            {
                var dataHtml = "", data = "";
                for(var i = localStorage.length-1; i >= 0; i--)//效率更高的循环方法
                {
                    data = localStorage.getItem(localStorage.key(i)).split("|");
                    dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span><br></br> by "+data[2]+"</p>";
                }
                document.getElementById("comment").innerHTML = dataHtml;
            },
            getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58
            {
                var isZero = function(num)//私有方法，自动补零
                {
                    if(num < 10)
                    {
                        num = "0" + num;
                    }
                    return num;
                }
                
                var d = new Date();
                return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
            }            
        }
        
        window.onload = function()
        {
            Storage.writeData();//当打开页面的时候，先将localStorage中的数据输出一边，如果没有数据，则输出空
			
            document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出
        }
</script>
</head>
<body>
<header>

  <nav>
    <ul><li><a href="index.html">我又不早睡的主页</a></li>
	<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>	
      <li><a href="index.html">关于我</a></li>
      <li><a href="share.html">相册分享</a></li>
	  <li><a href="blog.html">学习之路</a></li>
      <li><a href="gbook.html">留言</a></li>
    </ul>
  </nav>
</header>
<article>
  <h2 class="litle"><span>有什么想说的就在下面留言吧</span>留言</h2>
<div class="gbko">
  <h2>请在下方留言板留言吧</h2>
        <div id="content">
            <div id="post">
			<label for="name1">您的名字：</label> <input type="text" name="name" id="name" value=""/>  <br></br>
                <textarea class="transition"></textarea>
                <input id="postBt" type="button" value="发表评论" />
            </div>
            <div id="comment">
			
			</div>
			  <div id="comment">
							<p><span class="msg">很高兴浏览你的主页</span><span class="datetime">2018-06-07 12:23:12</span><br></br>by Ace</p>
							<p><span class="msg">您的主页做的太一般了</span><span class="datetime">2018-06-06 21:53:09</span><br></br> by 诸葛曦</p>
							<p><span class="msg">学习要加油！</span><span class="datetime">2018-06-06 16:04:18</span><br></br>by 陈陈陈</p>
							<p><span class="msg">...</span><span class="datetime">2018-06-05 15:58:32</span><br></br>by 日出日落</p>
							<p><span class="msg">很高兴浏览你的主页</span><span class="datetime">2018-06-04 21:44:12</span><br></br>by 564523</p>
			</div>
			
        </div>
</div>
</article>
<footer><p>Design by 我又不早睡 | 2018/6/7</p></footer> 
</body>
</html>
